<script setup lang="ts">
import { onMounted, ref, provide, watch } from 'vue'
import type { MenuItemList } from './types'
import { injectKeyOfActiveKey } from './util'
import MenuList from './MenuList.vue'

const props = withDefaults(
  defineProps<{
    activeEffect: boolean
    data: MenuItemList[]
    active: string
  }>(),
  {
    activeEffect: false,
    data: () => [],
    active: ''
  }
)

const activeKey = ref('')

provide(injectKeyOfActiveKey, activeKey)

onMounted(() => {
  activeKey.value = props.active
})

const emits = defineEmits<{
  (e: 'active', key: string): void
}>()

watch(activeKey, (v) => {
  if (props.activeEffect) {
    emits('active', v)
  }
})
</script>
<template>
  <div class="menu">
    <template v-for="(lst, idx) in data" :key="`p-${idx}`">
      <p class="menu-label">
        {{ lst.name }}
      </p>
      <MenuList v-if="lst.children" :items="lst.children" :active-key="activeKey" />
    </template>
  </div>
</template>
